<template>
    <!-- 维护作业-照会体检项维护页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="照会代码" prop="noteCode">
                        <el-input clearable v-model="searchParams.noteCode" @blur="searchParams.noteCode = searchParams.noteCode.toUpperCase()" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="体检项代码" prop="pntype">
                        <el-input clearable v-model="searchParams.itemCode" @blur="searchParams.itemCode = searchParams.itemCode.toUpperCase()" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <!-- 查询 --->
                    <el-button type="primary" icon="el-icon-search" @click="submitSearch"></el-button>
                    <!-- 重置 --->                    
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <el-row class="bgfff pb15">
                <el-col :span="24" class="pt5">
                    <el-button type="danger" plain @click="addNoteInfo()">新增</el-button> 
                </el-col>
            </el-row>
            <!-- 查询结果 -->
            <div class="table_container">
                <el-table v-loading="loading" :data=" noteListData" highlight-current-row header-cell-class-name="table-header-class"
                    style="width:100%">
                    <el-table-column min-width="80" property="noteCode" label="照会代码" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="80" property="clntSex" label="性别" align='center' show-overflow-tooltip :formatter="sexFormatter">
                    </el-table-column>
                    <el-table-column min-width="140" property="itemCode" label="体检项代码" align='center'  show-overflow-tooltip>
                    </el-table-column> 
                    <el-table-column min-width="140" property="itemDesc" label="体检项描述" align='center'  show-overflow-tooltip>
                    </el-table-column> 
                    <el-table-column min-width="150" fixed="right" label="操作" align='center'>
                        <template slot-scope="scope">
                            <span class="operationIcon" @click="updateNoteInfo(scope.row)">
                                <el-tooltip class="item" effect="light" content="修改" placement="top">
                                    <i class="el-icon-edit"></i>
                                </el-tooltip>
                            </span>

                            <span class="operationIcon ml5" @click="deleteData(scope.row)">
                                <el-tooltip class="item" effect="light" content="删除" placement="top">
                                    <i class="el-icon-delete"></i>
                                </el-tooltip>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                                :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex'
                                @current-change='handleCurrentChange' @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 弹框:新增或修改-->
        <el-dialog title="照会体检项维护" v-if="noteDataDialog" :visible.sync="noteDataDialog" width="60%" center>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="照会代码" prop="noteCode">
                            <el-input clearable placeholder=""  v-model="form.noteCode" :disabled="editType=='modify'" @blur="form.noteCode = form.noteCode.toUpperCase()"></el-input>
                        </el-form-item> 
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="性别" prop="clntSex" >
                            <el-select v-model="form.clntSex" placeholder="" :disabled="editType=='modify'" >
                                <el-option v-for="item in clntsexs" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="体检项代码" prop="itemCode">
                            <el-input clearable placeholder="" v-model="form.itemCode"  :disabled="editType=='modify'"  @blur="form.itemCode = form.itemCode.toUpperCase()"></el-input>
                        </el-form-item> 
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="体检项描述" prop="itemDesc">
                            <el-input clearable placeholder=""   v-model="form.itemDesc"  ></el-input>
                        </el-form-item> 
                    </el-col> 
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button v-if="saveButton" @click="onSubmit('form')" class="Defaultbutton">保 存</el-button>
                <el-button @click="noteDataDialog = false">返 回</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script> 
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import appName from "@/api/appName"
    import { getToken, setToken } from '@/utils/auth'
    import axios from 'axios'; 
    import {  pageList, saveNote ,deleteNote } from "@/api/setting/maintain/notePEitem.js";
 

export default {
    data() { 

        return {
            //常量下拉框：性别 
            clntsexs: [
                {
                    value: 'M',
                    label: '男'
                },
                {
                    value: 'F',
                    label: '女'
                },
                {
                    value: 'MF',
                    label: '不限'
                }
            ],
            update_inds: [
                {
                    value: 'I',
                    label: 'I--新增'
                },
                {
                    value: 'U',
                    label: 'U--更新'
                },
                {
                    value: 'D',
                    label: 'D--删除'
                }
            ],
            noteDataDialog: false,//默认隐藏 照会代码维护新增或修改弹框
            // 表单验证规则
            rules: { 
                noteCode: [
                    { required: true, message: '请输入照会代码。' },
                    { max: 32, trigger: 'change', message: '长度不能大于32个字符。' }
                ],
                clntSex: [
                    { required: true, message: '请选择性别。' }  
                ],
                itemCode: [
                    { required: true, message: '请输入体检项代码。' },
                    { max: 32, trigger: 'change', message: '长度不能大于32个字符。' }
                ],
                itemDesc: [ 
                    { max: 200, trigger: 'change', message: '长度不能大于200个字符。' }
                ]
            },
            // 查询条件
            searchParams: {
                noteCode: '',// 照会代码
                itemCode: ''// 体检项代码
            },
            // 主档列表数据
            noteListData: [
            ],
            loading: false,
            editType: '', //编辑类型，add-新增 modify-修改
            form: { //弹框表单
                noteCode: '',
                clntSex: '', 
                itemCode: '',
                itemDesc: ''
            },
            option: '', 
            isCheck: true,
            saveButton: true,
            //需要给分页组件传的信息
            paginations: {
                total: 0,        // 总数
                pageIndex: 1,  // 当前位于哪页
                pageSize: 10,   // 1页显示多少条
                pageSizes: [5, 10, 15, 20],  //每页显示多少条
                layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
            } 
        }
    },
    created() {
        //  this.getList();
    },
    mounted() {
        //  this.getList(); 
    },
    methods: { 
        //  新增或修改时提交表单数据
        onSubmit(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                console.log(valid); 
                // 业务检查是否通过 true-通过，false-不通过
                if (!_this.isCheck) {
                    console.log("条件不过通过，不能修改数据。");
                    return false;
                }
                if (valid) {
                    console.log('submit!!');
                    saveNote( _this.editType , _this.form).then(res => {
                        this.$store.dispatch('loading/CHANGE_LOADING',false)
                        if (res.resultCode == constant.SUCCESS) {
                            _this.$message({
                                type: 'success',
                                message: res.resultMsg
                            });
                            _this.noteDataDialog = false;
                            _this.paginations.pageIndex = 1;
                            _this.searchParams.noteCode = _this.form.noteCode;
                            _this.searchParams.itemCode = _this.form.itemCode;
                            _this.getList();
                        } else {                            
                            console.log('预约体检新增或修改失败!!');
                        }
                    }).catch(err => {
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //修改
        updateNoteInfo(row) {
            this.noteDataDialog = true;
            this.isCheck = true;
            this.saveButton = true;
            this.editType = 'modify';
            this.form = row;
        },
        //新增
        addNoteInfo() {
            this.noteDataDialog = true;
            this.editType = 'add';
            this.isCheck = true;
            this.saveButton = true;
            this.form = {
                noteCode: '',
                clntSex: '', 
                itemCode: '',
                itemDesc: '' 
            };
        },
        // 删除
        deleteData(row) {
            this.$confirm('确定是否删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let param = {
                    id: row.id,
                    itemCode: row.itemCode
                }
                deleteNote(param).then(res => {
                    if (res.resultCode == constant.SUCCESS) {
                        this.$message({
                                type: 'success',
                                message: '删除成功!'
                        });

                        this.paginations.pageIndex = 1;
                        this.searchParams.noteCode = "";
                        this.searchParams.itemCode = "";
                        this.getList(); 
                    }
                }).catch(err => {
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }, 
        // 查询列表
        getList() {
            this.paginations.total = 0;
            this.noteListData = [];
            let para = {
                "noteCode": this.searchParams.noteCode,
                "itemCode": this.searchParams.itemCode,
                "pageSize": this.paginations.pageSize,
                "pageNumber": this.paginations.pageIndex,
            }
            this.$store.dispatch('loading/CHANGE_LOADING', true)
            pageList(para).then(res => {
                this.$store.dispatch('loading/CHANGE_LOADING', false)
             
                if (res.resultCode == constant.SUCCESS && res.data) {
                    if (res.data.list.length) {
                        this.noteListData = res.data.list;
                        this.paginations.total = res.data.total;
                    } else {
                        this.$message({
                            message: '无符合条件任务！',
                            type: 'error'
                        });
                    }
                }
            }).catch(err => {
                this.$store.dispatch('loading/CHANGE_LOADING', false);
            })
        },
        // 每页多少条切换
        handleSizeChange(pageSize) {
            this.paginations.pageSize = pageSize;
            this.getList();
        },
        // 上下分页
        handleCurrentChange(page) {
            this.paginations.pageIndex = page;
            this.getList();
        },
        // 根据条件查询列表
        submitSearch() {
            this.paginations.pageIndex = 1;
            this.getList();
        },
        // 清除查询条件
        resetSearch() {
            this.searchParams.noteCode = '';
            this.searchParams.itemCode = '';
        }, 
        //性别字段转中文
        sexFormatter(row) {
            debugger;
            let result = "";
            this.clntsexs.forEach(e => {
                if (e.value == row.clntSex) {
                    result = e.label; 
                }
            })
            return result;
        } 
    },
    computed: {
        ...mapGetters(['tags']),
        reload() {
            return this.$store.state.loading.reload;
        }
    },
    activated() {
        if (this.reload) {
            this.$store.dispatch('loading/CHNAGE_RELOAD', false)
            Object.assign(this.$data, this.$options.data());
        }
    }
}

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
    }

    .search_container {
        padding: 20px 20px 0 20px; //    border-top: 1px solid #e1e1e1;
    }

    .common-box {
        padding-bottom: 15px;
    }

    .common-lab {
        line-height: normal!important;
        text-align: right;
        .labelName {
            text-align: right;
        }
    }
</style>
